.sliceTileGasPrice
  display flex
  justify-content center
  align-items center
  justify-content center
  padding 12px

  .sliceTileGasPriceIcon
    margin-right 13px
    color var(--good)

  .sliceTileGasPriceNumber
    margin 0px 3px 0px 0px
    font-family 'FiraCode'
    font-size 20px
    letter-spacing -1px
    
  .sliceTileGasPriceUnit
    margin 0px 0px 2px 2px
    text-transform uppercase
    font-size 8px
    font-weight 500

.sliceGasBlock
  position relative
  display flex
  border-radius 8px
  padding 24px 0px 20px 0px
  justify-content center
  width 100%

  .feeToolTip
    background var(--ghostB)
    position absolute 
    left 130px
    bottom 4px
    top 4px
    right 4px
    z-index 220
    border-radius 6px
    padding 16px
    font-size 11px
    font-weight 400
    pointer-events none
    display flex
    justify-content center
    align-items center
    text-align center
    line-height 17px
    box-shadow 0px 4px 4px var(--ghostZ)
    // animation 8s shake ease-in-out infinite alternate
    will-change transform

  .feeToolTipPriority
    left 0
    right 125px

  .gasBlockTag
    position absolute
    top 0px
    left 2px
    right 2px
    height 24px
    display flex
    justify-content center
    font-size 10px
    font-weight 300
    text-transform uppercase
    letter-spacing 1px
    color var(--good)
    text-align center
    display none

  .gasItem
    position relative
    display flex
    justify-content center
    align-items center
    flex-direction column
    height 56px
    padding 12px 10px 8px 10px
    box-sizing border-box

    .gasArrowNotify
      position absolute
      top 17px
      left -4px
      height 17px
      width 17px
      border-radius 8px
      background var(--ghostB)
      z-index 4
      font-size 12px
      line-height 10px
      padding 4px 0px 0px 5px
      box-sizing border-box
      font-family 'FiraCode'
      display none

    .gasLevelLabel
      font-size 10px
      display flex
      flex-direction column
      justify-content flex-end
      text-align center
      font-weight 500
      text-transform uppercase
      letter-spacing 1px
      padding-left 1px

    .gasLevelTime
      display flex
      justify-content flex-end
      align-items center
      font-size 10px
      font-weight 300
      color var(--outerspace05)
      margin-left -3px
      letter-spacing 0px
      margin-top 2px
      display none

      .timeUnit
        font-size 7px
        margin-left 1px
        margin-right -2px

    .gasGweiNum
      font-size 20px
      font-family 'FiraCode'
      display flex
      justify-content center
      align-items center

      .gasGweiNumIcon
        margin -1px 4px 0px -12px

    .gasGweiLabel
      position relative
      top 0px
      font-size 8px
      letter-spacing 1px
      padding-left 1px
      font-weight 500
      padding-bottom 2px
      color var(--good)

  .gasItemSmall
    width 30%
    min-width 30%
    max-width 30%
    top -1px
    .gasLevelLabel
      font-size 8px
    .gasGweiNum
      font-size 16px
  
  .gasItemLarge
    width 40%
    min-width 40%
    max-width 40%

    opacity 1
    .gasLevelLabel
      font-size 10px
    .gasGweiNum
      line-height 18px
    .gasGweiLabel
      font-size 10px
      padding 3px 0px 1px 0px 

.gasArrow
  position absolute
  top 5px
  left -14px
  height 30px
  width 30px
  z-index 200
  border-radius 8px
  cursor pointer
  color var(--outerspace)

  *
    pointer-events none !important

  .gasArrowInner
    position relative 
    top 1px
    left 4px
    z-index 2
    height 26px
    width 26px
    border-radius 13px
    padding 1px 1px
    box-sizing border-box
    transform rotate(90deg)
  
.gasArrowRight
  left auto
  right -14px
  transform scaleX(-1)
  cursor pointer

  *
    pointer-events none

.gasArrow:hover
  background var(--ghostB)
  box-shadow 0px 1px 1px 0px var(--ghostY)

.gasEstimate
  display flex
  flex-direction column
  justify-content flex-end
  align-items center
  box-sizing border-box
  padding 8px

  .gasEstimateRange
    display flex
    justify-content center
    align-items center
    font-size 15px
    text-transform uppercase
    font-family 'FiraCode'
    margin-bottom 2px

    .gasEstimateRangeCurrency
      font-size 10px
      color var(--good)
      font-weight 300

    .gasEstimateRangeDash
      font-size 10px
      padding 0px 6px 0px 3px
      letter-spacing 0px

  .gasEstimateLabel
    display flex
    justify-content center
    align-items center
    font-size 8px
    text-transform uppercase
    font-weight 500
    white-space nowrap

.gasEstimateSymbol
  font-size 9px
  font-weight 300

.gasEstimate:last-child
  border-bottom none
